<template>
    <div class="container">
        <el-main>
            <el-row >
                <!-- 左 -->
                <el-col class="left" :span="12">
                    <img src="../assets/images/logo.png" alt="河北保尔logo" class="logo-img">
                </el-col>
                
                <!-- 右 -->
                <el-col class="right" :span="12">
                    <el-form
                        ref="ruleFormRef"
                        :model="formData"
                        class="login-form"
                        :rules="rules"
                        @submit.prevent="handleLogin"
                    >
                        <h3 class="form-title">河北保尔办公自动化平台</h3>
                        
                        <el-form-item prop="account">
                            <el-input 
                                v-model="formData.account" 
                                placeholder="请输入用户账号"
                            />
                        </el-form-item>
                        
                        <el-form-item prop="password">
                            <el-input 
                                v-model="formData.password" 
                                placeholder="请输入用户密码"
                                show-password
                            />
                        </el-form-item>
                        
                        <el-form-item class="form-actions">
                            <el-button 
                                id="but"
                                type="primary" 
                                class="login-btn"
                                :loading="isLoading"
                                @click="handleLogin"
                            >
                                登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-main>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { login } from '../../src/components/api/Login'
// 定义规则
const rules = {
  account: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' },
  ],
}

const router = useRouter();

const formData = reactive({
    account: '',
    password: ''
});

const ruleFormRef = ref();
const isLoading = ref(false);

// 登录
async function Login() {
  try {
    let data = {
      account: formData.account,
      password: formData.password,
    }
    const res = await login('login', data)
    if (res.code == 200) {
      console.log(res);
      sessionStorage.setItem('role', res.dataset.user.userName)
      sessionStorage.setItem('token', res.dataset.token)
      sessionStorage.setItem('roleId', res.dataset.user.roleId)
      localStorage.setItem('user', JSON.stringify(res.dataset.user))
      if (res.dataset.className) {
        localStorage.setItem('userClassName', JSON.stringify(res.dataset.className))
      } else {
        localStorage.setItem('userClassName', JSON.stringify(''))
      }
      if (res.dataset.projectId) {
        localStorage.setItem('userProjectId', JSON.stringify(res.dataset.projectId))
      } else {
        localStorage.setItem('userProjectId', JSON.stringify(''))
      }
      if (res.dataset.user.userId) {
        sessionStorage.setItem('userId', JSON.stringify(res.dataset.user.userId))
      }
      ElMessage.success('登录成功')
      setTimeout(() => {
        router.push('/HomeView')
        alert("登录成功")
      }, 1000)
    } else {
      ElMessage.error('账号或密码错误')
    }
  } catch (error) {
    console.error('登录失败', error)
  }
}

const handleLogin = async () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      // 调用登录函数
      Login()
    }
  })
}

</script>

<style lang="less" scoped>
.container{
    width:100vw;
    height:100vh;
}
.el-main {
    width: 100vw;
    height: 100vh;
    background-image: url('../assets/images/登录.png');
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    padding: 7vw 40vh;
}

.el-row {
    width: 100%;
    height:100%;
    .left, .right {
        height: 400px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .left {
        background: rgba(228, 241, 249, 0.7);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        padding: 20px; 
    }
    
    .right {
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        display: flex;
        justify-content: space-evenly;
        .login-form {
            width: 100%;
            height:100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            padding:3vh 0;
            justify-content: space-evenly;
        }
        
        .form-title {
            text-align: center;
            color: #333;
            font-weight: 600;
        }
        
        .form-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .login-btn {
                width: 60%;
            }
        }
    }
}
.el-form{
    width:90%;
    height:20%;
}
.el-input{
  width:280px;
  height:40px;
}
#but{
  background:#0E6BB1;
  width:250px;
  height:40px;
}

</style>